<template>
  <div id="register">
    <c-title :hide="false" text="zkc设备绑定"></c-title>
    <div class="box">
      <div class="box1">
        <div id="content" v-if="status !== 1">
          <span class="scan-style" @click.native="getcode">
              <i
                slot="icon"
                class="iconfont icon-saoyisao"
              ></i>
              <span>点击扫描</span>
          </span>
          <ul class="area_number">
            <li>
              <span class="name-style">zkc扫码设备</span>
              <i class="iconfont icon-fontclass-qianshu"></i>
              <van-field v-model.trim="cloudImei" placeholder="手动输入zkc设备IMEI" :border="false" clearable center />
            </li>
          </ul>
          <div class="btn">
            <button type="button" @click="submitBtn">绑定</button>
          </div>
        </div>
        <div id="content" v-if="status == 1">
          <span class="cow-val">zkc设备：{{cloudImei}}</span>
          <div class="btn">
            <button type="button" class="Bound-style">已绑定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import zkzDevice_controller from './zkzDevice_controller';
export default zkzDevice_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#register {
  .box {
    // padding-top: 1.8rem;
    margin: 0.8rem;
    background: #fff;
    border-radius: 0.4rem;
  }

  .box1 {
    padding: 0 0.8rem;
    // 新css
    #content {
      padding-top: 1.2rem;
      background-color: #fff;
      
      .scan-style {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #2492FF;
        margin: 0.4rem auto 0 auto;
        flex-direction: column;
        color: white;

        .icon-saoyisao {
          zoom: 2.8;
        }
      }

      .area_number {
        padding-top: 0.8rem;
        font-size: 18px;
        color: #333;

        .name-style {
          font-size: 0.9rem;
          font-weight: 400;
          color: #00001C;
        }
        
        .icon-fontclass-qianshu {
          z-index: 1;
          position: absolute;
          color: #AAAAB3;
          left: 7.2rem;
        }

        li {
          height: 2.2rem;
          line-height: 2.2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            width: 7.75rem;
            text-align: left;
          }
        }
      }

      .btn {
        margin-top: 1rem;
        width: 100%;

        button {
          // width: 20.625rem;
          width: 100%;
          height: 2.8125rem;
          font-size: 16px;
          margin-bottom: 1.25rem;
          border-radius: 1.875rem;
          border: none;
          background-color: #f15353;
          color: #fff;
        }

        .Bound-style {
          background: white;
          border: 1px solid #F15353;
          color: #F15353;
          margin-top: 0.2rem;
        }
      }

      .cow-val {
        padding: 1.3rem 0;
        display: flex;
        justify-content: center;
        background: #F5F5F5;
        border-radius: 0.5rem;
        font-size: 0.9rem;
        font-weight: 400;
        color: #00001C;
      }
    }
  }

  .van-cell {
    // margin-left: 10px;
    padding: 0;
    height: 1.8rem;
    padding-left: 25px;
    border-bottom: solid 0.0625rem #E7E7E7;

    ::v-deep .van-field__control {
      color: #333;
      font-size: 16px;
    }

    ::v-deep input::placeholder {
      color: #AAAAB3;
      font-size: 0.8rem;
    }
  }
}
</style>
